const colorList = {
  blue: {
    color: '#1E9FFF ',
    colorStops: [{ offset: 1, color: '#1E9FFF' }, { offset: 0, color: '#00f2fe' }]
  },
  green: {
    color: '#0fd850',
    colorStops: [{ offset: 1, color: '#0fd850' }, { offset: 0, color: '#f9f047' }]
  },
  lightGreen: {
    color: '#43e97b',
    colorStops: [{ offset: 1, color: '#43e97b' }, { offset: 0, color: '#38f9d7' }]
  },
  red: {
    color: '#ff0844',
    colorStops: [{ offset: 1, color: '#ff0844' }, { offset: 0, color: '#ffb199' }]
  },
  orange: {
    color: '#ff5858',
    colorStops: [{ offset: 1, color: '#ff5858' }, { offset: 0, color: '#f09819' }]
  },
  yellow: {
    color: '#fffc00',
    colorStops: [{ offset: 1, color: '#fffc00' }, { offset: 0, color: '#fff' }]
  },
  white: {
    color: '#ece9e6',
    colorStops: [{ offset: 1, color: '#ece9e6' }, { offset: 0, color: '#fff' }]
  },
  black: {
    color: '#000000',
    colorStops: [{ offset: 1, color: '#000000' }, { offset: 0, color: '#434343' }]
  },
  perple: {
    color: '#fa71cd',
    colorStops: [{ offset: 1, color: '#c471f5' }, { offset: 0, color: '#fa71cd' }]
  },
  pink: {
    color: '#ff1493',
    colorStops: [{ offset: 1, color: '#ff1493' }, { offset: 0, color: '#ff1493' }]
  }
};

const barOption = (config) => {
  //坐标轴及lebel默认白色
  let themeColor = (config && config.themeColor === 'dark' ? '#000' : '#fff');
  let option = {
    tooltip: {
      trigger: 'axis',
      show: true,
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '3%',
      bottom: '5%',
      containLabel: true
    },
    legend: {
      data: [],
      x: '10',
      y: '10',
      textStyle: {
        fontSize: '12',
        fontWeight: 'bold',
        color: themeColor
      }
    },
    xAxis: {
      type: 'category',
      data: [],
      axisTick: {
        alignWithLabel: true
      },
      axisLine: {
        lineStyle: {
          color: themeColor,
          width: '2'
        }
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: themeColor,
          fontSize: '14',
          fontWeight: 'bold'
        },
        formatter: (params) => {
          if (config && config.isLableFormat) {
            let newParamsName = '';
            const paramsNameNumber = params.length;
            const provideNumber = config.provideNumber || 6; // 一行显示几个字符
            const rowNumber = Math.ceil(paramsNameNumber / provideNumber);
            if (paramsNameNumber > provideNumber) {
              for (let p = 0; p < rowNumber; p++) {
                let tempStr = '';
                const start = p * provideNumber;
                const end = start + provideNumber;
                if (p === rowNumber - 1) {
                  tempStr = params.substring(start, paramsNameNumber);
                } else {
                  tempStr = params.substring(start, end) + '\n';
                }
                newParamsName += tempStr;
              }
            } else {
              newParamsName = params;
            }
            return newParamsName;
          } else {
            return params;
          }
        }
      },
    },
    yAxis: [{
      type: 'value',
      axisLine: {
        lineStyle: {
          color: themeColor,
          width: '2'
        }
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: themeColor,
          fontSize: '14',
          fontWeight: 'bold'
        }
      },
      splitLine: {
        show: false
      }
    }, {
      type: 'value',
      axisLine: {
        lineStyle: {
          color: themeColor,
          width: '2'
        }
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: themeColor,
          fontSize: '14',
          fontWeight: 'bold'
        },
        formatter: function (data) {
          return data + "%";
        }
      },
      splitLine: {
        show: false
      }
    }],
    series: [{
      name: '',
      animation: true,
      type: 'bar',
      barMaxWidth: 35,
      barGap: '0.30',
      data: [],
      label: {
        show: true,
        position: 'top',
        fontWeight: "bold",
        color: '#ff0844',
        fontSize: 14
      },
      itemStyle: {
        barBorderRadius: [5, 5, 0, 0],
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 1, color: '#ff0844' }, { offset: 0, color: '#ffb199' }])
      }
    }]
  };
  if (config && config.showDataZoom) {
    const { startValue, endValue } = config;
    option.dataZoom = [{
      // 详细配置见：https://echarts.apache.org/zh/option.html#dataZoom-slider
      type: 'slider',
      startValue: startValue, // 初始显示值
      endValue: endValue, // 结束显示值
      height: 10,//组件高度
      left: '4%', //左边的距离
      right: '5%',//右边的距离
      bottom: '7%',//底边的距离
      showDataShadow: false,//是否显示数据阴影 默认auto
      showDetail: false,//即拖拽时候是否显示详细数值信息 默认true
      realtime: true, //是否实时更新
      filterMode: 'filter'
    }];
    option.grid.bottom = '12%';
    option.grid.left = '5%';
    option.grid.right = '5%';
  }
  return option;
}

const pieOption = (config) => {
  let option = {
    title: {
      text: '',
      left: 'center',
      textStyle: {
        fontSize: '16',
        fontWeight: 'bold',
        color: '#000'
      }
    },
    legend: { x: 'center', y: 'bottom' },
    tooltip: {
      trigger: 'item',
      formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    color: ['#1E9FFF', '#a9a9a9'],
    series: [{
      name: '',
      type: 'pie',
      radius: ['30%', '45%'],
      center: ['50%', '50%'],
      label: {
        show: true,
        position: 'outside',
        formatter: '{d}%',
        textStyle: {
          fontSize: '14',
          fontWeight: 'bold',
          color: '#000'
        }
      },
      data: []
    }]
  }
  return option;
}

export { barOption, colorList, pieOption }